import { defineComponent, defineAsyncComponent, markRaw, h } from 'vue'
import type { PropType } from 'vue'
import type { questionSideListState } from '@/types/baseConfig'
import { geRedirectName } from '@/enum/questionRedirect'

export default defineComponent({
  name: 'DynamicComponent',
  props: {
    compData: {
      type: Object as PropType<questionSideListState>,
      default: () => {
        return {}
      }
    },
    component: {
      type: String,
      required: true
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const handChange = (e: any) => {
      emit('change', e)
    }
    const modules = import.meta.glob(['./*.tsx'])
    const link: any = modules[`./${geRedirectName(props.component)}.tsx`]
    const AsyncComponent = markRaw(defineAsyncComponent(link))
    return () =>
      h(AsyncComponent, {
        'comp-data': props.compData,
        onChange: handChange
      })
  }
})
